<template lang="pug">
  el-tabs.tab-padding(
    class="main-tabs"
    v-model="currentActTab")
    el-tab-pane(
      class="main-tabs-pane"
      v-for="(tab, index) in tabList"
      :key="index"
      :label="tab.label" :name="tab.name")
      slot(:name="tab.name")
  //- div.top-tab
  //-   a(v-for="(tab, index) in tabList"
  //-     href="#"
  //-     :key="index"
  //-     :name="tab.name"
  //-     :class="{isAct: index === initIndex}"
  //-     @click="handleClick(index)") {{tab.label}}
  //-     slot(:name="" v-if="index === initIndex")
</template>
<script>
export default {
  name: 'taskTab',
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    initIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      currentActTab: this.tabList[this.initIndex].name
    }
  },
  methods: {
    handleClick (tab) {
      const index = Number(tab.index)
      this.currentActTab = this.tabList[index].name
      // this.currentActTab = this.tabList[index].name
      this.$emit('actTab', index)
    }
  }
}
</script>
<style lang="sass" scoped>
.tab-padding
  padding: 0 12px
.top-tab
  padding: 0
  /* display: flex */
  justify-content: space-around
.top-tab
  &>a
    font-size: 14px
    font-weight: 600
    color: #373737
    line-height: 40px
  .isAct
    border-bottom: 2px solid #3FB4FE
</style>
